<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
  <div class="collect">
    <!-- Add a static page for my favorite module -->
    <div class="collect-header">
      <div class="collect-title">
        <i class="el-icon-collection-tag" style="color: #ff6700"></i>
        个人信息
      </div>
    </div>
    <div
      v-if="businessId == null"
      style="
        background-color: white;
        height: 800px;
        width: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin: 0 auto;
      "
    >
      <div style="height: 20px"></div>
      <div class="uname" style="margin-top: 50px">
        <span style="margin-left: 30px">用户名</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          userName
        }}</span>
      </div>
      <div class="sex" style="margin-top: 50px">
        <span style="margin-left: 30px">性别</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          gender
        }}</span>
      </div>
      <div class="uname" style="margin-top: 50px">
        <span style="margin-left: 30px">昵称</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          nickname
        }}</span>
      </div>
      <div class="psd" style="margin-top: 50px">
        <span style="margin-left: 30px">密码</span>
        <span style="width: 50px; height: 60px; margin-left: 30px"
          >***********</span
        >
      </div>
      <div class="phone" style="margin-top: 50px">
        <span style="margin-left: 30px">电话号码</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          userphonenumber
        }}</span>
      </div>
      <el-button
        type="success"
        round
        style="margin-top: 50px; margin-left: 30px"
        @click="dialogFormVisible = true"
        >编辑</el-button
      >
      <el-button
        type="success"
        round
        style="margin-top: 50px; margin-left: 30px"
        @click="regDialog = true"
        >注册为商家</el-button
      >

      <!-- 注册商家 -->
      <el-dialog
        title="注册为商家"
        :visible.sync="regDialog"
        center
        width="30%"
      >
        <el-form :model="regForm">
          <el-form-item label="商户昵称" label-width="120px">
            <el-input
              v-model="regForm.businessName"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="120px">
            <el-input
              v-model="regForm.businessPhone"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="regDialog = false">取 消</el-button>
          <el-button type="primary" @click="register">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div
      v-else
      style="
        background-color: white;
        height: 800px;
        width: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin: 0 auto;
      "
    >
      <div style="height: 20px"></div>
      <div class="uname" style="margin-top: 50px">
        <span style="margin-left: 30px">用户名</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          userName
        }}</span>
      </div>
      <div class="sex" style="margin-top: 50px">
        <span style="margin-left: 30px">性别</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          gender
        }}</span>
      </div>
      <div class="uname" style="margin-top: 50px">
        <span style="margin-left: 30px">昵称</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          nickname
        }}</span>
      </div>
      <div class="psd" style="margin-top: 50px">
        <span style="margin-left: 30px">密码</span>
        <span style="width: 50px; height: 60px; margin-left: 30px"
          >***********</span
        >
      </div>
      <div class="phone" style="margin-top: 50px">
        <span style="margin-left: 30px">电话号码</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          businessPhone
        }}</span>
      </div>
      <div class="businessName" style="margin-top: 50px">
        <span style="margin-left: 30px">商家名称</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          businessName
        }}</span>
      </div>
      <div class="businessPhone" style="margin-top: 50px">
        <span style="margin-left: 30px">联系电话</span>
        <span style="width: 50px; height: 60px; margin-left: 30px">{{
          businessPhone
        }}</span>
      </div>
      <el-button
        type="success"
        round
        style="margin-top: 50px; margin-left: 30px"
        @click="businessDialog = true"
        >编辑</el-button
      >

      <el-dialog title="个人信息" :visible.sync="businessDialog">
        <el-form :model="form">
          <el-form-item label="用户名：" label-width="120px">
            <el-input
              v-model="form.userName"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别：" label-width="120px">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="昵称：" label-width="120px">
            <el-input
              v-model="form.nickname"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码：" label-width="120px">
            <el-input
              v-model="form.psw"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码：" label-width="120px">
            <el-input
              v-model="form.userphonenumber"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="商家名称:" label-width="120px">
            <el-input
              v-model="form.businessName"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" label-width="120px">
            <el-input
              v-model="form.businessPhone"
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="businessDialog = false">取 消</el-button>
          <el-button type="primary" @click="subMit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名：" label-width="120px">
          <el-input
            v-model="form.userName"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：" label-width="120px">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称：" label-width="120px">
          <el-input
            v-model="form.nickname"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" label-width="120px">
          <el-input
            v-model="form.psw"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话号码：" label-width="120px">
          <el-input
            v-model="form.userphonenumber"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      businessForm: {},
      collectList: [],
      dialogFormVisible: false,
      businessDialog: false,
      userDialog: false,
      form: {
        userName: "",
        gender: "",
        nickname: "",
        userphonenumber: "",
        psw: "",
        businessId: "",
        businessName: "",
        businessPhone: "",
        userId: this.$store.getters.getUser.userId,
      },
      userName: "",
      formLabelWidth: "120px",
      gender: "",
      nickname: "",
      userphonenumber: "",
      businessId: "",
      businessName: "",
      businessPhone: "",
      regForm: {
        businessName: "",
        businessPhone: "",
      },
      regDialog: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },

  methods: {
    // 获取用户信息

    getUserInfo() {
      let userId = this.$store.getters.getUser.userId;

      this.$axios.post("/user/user-info", { userId }).then((res) => {
        if (res.data.code == "001") {
          this.form.userName = this.userName = res.data.user.username;
          this.form.gender = this.gender = res.data.user.gender;
          this.form.userphonenumber = this.userphonenumber =
            res.data.user.userphonenumber;
          this.businessId = this.form.businessId = res.data.user.businessId;
          this.businessPhone = this.form.businessPhone =
            res.data.user.businessPhone;
          this.businessName = this.form.businessName =
            res.data.user.businessName;
          this.form.nickname = this.nickname = res.data.user.nickName;
        }
      });
    },
    register() {
      let userId = this.$store.getters.getUser.userId;
      this.regForm.userId = userId;
      this.$axios
        .post("/business/add-business", { ...this.regForm })
        .then(() => {
          this.regForm = {};
          this.regDialog = false;
          this.getUserInfo();
        });
    },
    subMit() {
      let vo = {
        username: this.form.userName,
        gender: this.form.gender,
        userphonenumber: this.form.userphonenumber,
        password: this.form.psw,
        userId: this.$store.getters.getUser.userId,
        nickName: this.form.nickname,
      };
      this.$axios.post("/user/modify", vo).then(() => {
        this.businessDialog = false;
        this.dialogFormVisible = false;

        this.getUserInfo();
      });
    },
  },
  //   activated() {
  //     // 获取收藏数据
  //     this.$axios
  //       .post("/api/user/collect/getCollect", {
  //         user_id: this.$store.getters.getUser.user_id
  //       })
  //       .then(res => {
  //         if (res.data.code === "001") {
  //           this.collectList = res.data.collectList;
  //         }
  //       })
  //       .catch(err => {
  //         return Promise.reject(err);
  //       });
  //   }
};
</script>
<style>
.collect {
  background-color: #f5f5f5;
}
.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.collect .collect-header .collect-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
/* 收藏列表为空的时候显示的内容CSS */
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}
.collect .collect-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
}
.collect .collect-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
/* 收藏列表为空的时候显示的内容CSS END */
</style>